<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>svg椭圆</title>
</head>

<body>
    <svg height="140" width="500">
        <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
    </svg>
    <div>
        cx属性定义了椭圆的x坐标<br />
        cy属性定义了椭圆的y坐标<br />
        rx属性定义了椭圆的横向半径<br />
        ry属性定义了椭圆的纵向半径<br />
    </div>
    <svg height="150" width="500">

        <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />

        <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />

        <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
    </svg>
    <div>
        依次绘制出了三个SVG椭圆
    </div>
    <svg height="100" width="500">

        <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />

        <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />
    </svg>
    <div>
        上面的SVG代码画了两个椭圆(一个黄色，一个白色)：
    </div>
</body>

</html>